<template>
  <div>
    <a-cascader
        :value="info.expressions.left?info.expressions.left.split('.'):null"
        :options="getOptions"
        @change="leftChange"
    />
    <a-select
        style="width: 80px"
        :value="info.expressions.center"
        @change="selectChange"
    >
      <a-select-option value="==">
        等于
      </a-select-option>
      <a-select-option value="!=">
        不等于
      </a-select-option>
    </a-select>
    <a-input
        style="width: 120px"
        :value="info.expressions.right"
        @change="rightChange"
    ></a-input>
    <a-button type="danger" icon="delete" @click="deleteInfo"/>
  </div>
</template>

<script>

import {mapState} from "vuex";

export default {
  name: "SimplenessExpressions",
  props: {
    info: Object,
    previousInfo: Object,
    indexInfo: Number
  },
  computed: {
    ...mapState('fieldManage', ['tableData']),
    getOptions() {
      let data = []
      this.tableData.map((obj) => {
        data.push({value: obj.fieldName, label: obj.label})
      })
      return [{
        value: 'fields',
        label: '基础字段',
        children: data
      }]
    }
  },
  methods: {
    selectChange(val) {
      Object.assign(this.info.expressions, {center: val})
      this.$forceUpdate()
    },
    leftChange(val) {
      Object.assign(this.info.expressions, {left: val[0] + '.' + val[1]})
      this.$forceUpdate()
    },
    rightChange(val) {
      Object.assign(this.info.expressions, {right: val.target.value})
      this.$forceUpdate()
    },
    deleteInfo() {
      let conditions = []
      let index = -1
      for (let condition of this.previousInfo.conditions) {
        index++
        if (!condition.class || index === this.indexInfo) {
          continue
        }
        conditions.push(condition)
      }
      if (conditions.length === 0) {
        Object.keys(this.previousInfo).forEach(key => {
          this.previousInfo[key] = undefined
        })
      } else {
        Object.assign(this.previousInfo, {conditions: conditions})
      }
    }
  }
}
</script>

<style scoped>

</style>
